<template>
	<view class="container">
		<view class="restCash">
			<view style="font-size: 100rpx;color:#fff;margin-bottom:10rpx;">￥{{shopDetail.restCash}}</view>
			<view class="tui-grid-label">商铺余额</view>
			<view class="grid-wrap">


				<view class="grid-item">
					<view class="order-num">{{orderSum.yesterdayOrderCount}}</view>
					<view class="tui-grid-label">昨日订单数</view>
				</view>
				<view class="grid-item">
					<view class="order-num">{{orderSum.todayOrderCount}}</view>
					<view class="tui-grid-label">今日订单数</view>
				</view>
				<view class="grid-item">
					<view class="order-num">{{orderSum.totalOrderCount}}</view>
					<view class="tui-grid-label">总订单数</view>
				</view>

			</view>
		</view>

		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="uni-ec-canvas" canvas-id="uni-ec-canvas" :ec="ec"
		 @inited="inited"></uni-ec-canvas>
		<tui-card :title="{text:'商户余额充值',color:'#000'}">
			<template v-slot:body>
				<view style="padding:20rpx;">
					<view class="charge-amount-container">
						<view class="charge-amount-item" @click="charge(100)">100元</view>
						<view class="charge-amount-item" @click="charge(200)">200元</view>
						<view class="charge-amount-item" @click="charge(0.01)">300元</view>

					</view>
				</view>
			</template>
			<template v-slot:footer>
				<view class="tui-default">

				</view>
			</template>
		</tui-card>


		<!-- <view class="tui-charge">
			<tui-button type="warning" hover-class="tui-button-hover" :loading="btnLoading" shadow :size="30" shape="circle"
			 @click="showPopup">
				充值
			</tui-button>
		</view> -->

	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import {
		mapState
	} from "vuex";
	import * as echarts from "../../components/uni-ec-canvas/echarts.min.js";

	export default {
		data() {
			return {

				shopDetail: {
					restCash: 0
				},
				orderSum: {
					yesterdayOrderCount: 0,
					todayOrderCount: 0,
					totalOrderCount: 0
				},
				ec: {
					option: {
						xAxis: {

							data: [],
							boundaryGap: false,
							type: "category",
							axisTick: { //坐标轴刻度相关设置。
								show: false,
							},
							axisLine: { //坐标轴轴线相关设置
								lineStyle: {
									color: '#E5E9ED',
									// opacity:0.2
								}
							},
							splitLine: { //坐标轴在 grid 区域中的分隔线。
								show: false,
								lineStyle: {
									color: '#E5E9ED',
									// 	opacity:0.1
								}
							},
							axisLabel: {
								//坐标轴刻度标签的相关设置。
								clickable: true, //并给图表添加单击事件  根据返回值判断点击的是哪里
								interval: 14,
								textStyle: {
									color: '#a8aab0',
									fontStyle: 'normal',
									fontFamily: '微软雅黑',
									fontSize: 12,
								}

							}
						},
						grid: {
							top: "15%",
							right: "15%",
							left: "15%",
							bottom: "12%"
						},
						tooltip: {
							trigger: "axis",
							triggerOn: "click",
							axisPointer: {
								type: "cross"
							},
							padding: [5, 10]
						},
						yAxis: [{
							type: 'value',
							minInterval: 1,
							splitNumber: 5,
							axisLabel: {
								textStyle: {
									color: '#a8aab0',
									fontStyle: 'normal',
									fontFamily: '微软雅黑',
									fontSize: 12,
								}
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#E5E9ED',
									// 	opacity:0.1
								}
							}
						}],
						legend: {
							data: ["订单数"]
						},
						series: [{
							name: "订单数",
							itemStyle: {
								normal: {
									color: '#3A84FF',
									lineStyle: {
										color: "#3A84FF",
										width: 1
									},
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: 'rgba(58,132,255,0)'
										}, {
											offset: 1,
											color: 'rgba(58,132,255,0.35)'
										}]),
									}
								}
							},
							smooth: true,
							type: "line",
							data: [],
							animationDuration: 2800,
							animationEasing: "cubicInOut"
						}]
					} //echart 配置项
				}
			};
		},
		computed: {



		},
		onLoad(options) {
			this.shopDetail = JSON.parse(options.detail);

		},
		onShow() {
			this.tui.request(
					"/api/shop/info",
					"GET", {
						shopId: this.shopDetail.shopId
					},
					false,
					false,
					false
				)
				.then((res) => {
					this.shopDetail = res.data
				});
			this.tui.request(
					"/api/order/statistic",
					"GET", {
						shopId: this.shopDetail.shopId
					},
					false,
					false,
					false
				)
				.then((res) => {
					this.ec.option.xAxis.data = res.data.statistic.map(v => {
						return v.orderDate
					})
					this.ec.option.series[0].data = res.data.statistic.map(v => {
						return v.orderCount
					})
					this.orderSum = res.data.orderSum
				});
		},
		methods: {
			inited(chart) {

				console.log('图表初始化完毕')
				console.log('chart实例', chart)
			},
			charge(value) {
				console.log(this.shopDetail)
				let self = this;
				this.tui.request(
						"/api/deposit/add",
						"POST", {
							shopId: this.shopDetail.shopId,
							cash: value
						},
						false,
						false,
						false
					)
					.then((res) => {
						if (res.code == 200) {
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: "MD5",
								paySign: res.data.paySign,
								success: function(res) {
									self.tui.request(
											"/api/shop/info",
											"GET", {
												shopId: self.shopDetail.shopId
											},
											false,
											false,
											false
										)
										.then((res) => {
											self.shopDetail = res.data
										});
									uni.showToast({
										title: "支付成功",
										icon: "success",
										duration: 2000,
										complete: () => {


										}
									});
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}

					});
			}


		},


	};
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.restCash {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #ff4f20;
		padding-bottom: 20rpx;
		padding-top: 30rpx;
		margin-bottom: 50rpx;
	}

	.grid-wrap {
		display: flex;
		width: 100%;
		margin-top: 20rpx;
	}

	.grid-item {
		width: 33%;
	}

	.tui-grid-label {
		text-align: center;
		font-size: 24rpx;
		color: #feaeaa;
	}

	.order-num {
		font-size: 64rpx;
		text-align: center;
		color: #fff;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
	}

	.tui-charge {
		width: 100%;
		margin-top: 50rpx;

		padding: 10rpx 25rpx 15rpx;
		box-sizing: border-box;
	}

	.tui-popup-box {}

	.charge-amount-container {
		display: flex;
		justify-content: space-evenly;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		border-radius: 20rpx;

	}

	.charge-amount-item {
		width: 30%;
		height: 150rpx;
		border-radius: 20rpx;
		color: #307bf2;

		text-align: center;
		line-height: 150rpx;
		font-size: 36rpx;
		font-weight: bold;
		background: #f5f8ff;

	}
</style>
